Electron 定义

electron 是一个框架 electron 通过搭建web页面的形式，构建跨平台桌面应用程序使用该框架的产品：vsCode

上手

前置需求

技能支持

[x] html
[x] css
[x] js

环境支持

[x] windows7 及以上
[x] Nodejs10 及以上

开发注意事项

注意进程(获取系统数据)与线程的概念

创建BrowserWindow实例时，如果需要调用process对象集或使用require引入文件，则需要添加配置

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),  // 默认存在
      nodeIntegration: true,  // 节点对象集合，需要打开
      contextIsolation: false,  // 上下文隔离，需要关闭
    },
  });

运行 electron（最新）

1. 利用npx创建项目

txt

npx create-react-app electron-cra

运行 electron

1. 克隆或下载官方示例

txt

https://github.com/electron/electron-quick-start

2. 安装依赖

txt

npm install

2.5 安装npm淘宝镜像

txt

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

3. 启动项目

txt

npm start


# 使用

## 概念集

### 目录结构

主进程文件：main.js

### 执行顺序

#### 概念

  主进程：一个Electron项目只有一个主进程，一般通过 **app** 程序方法来监听其生命周期

  渲染进程：每一个页面，就是一个渲染进程，一般通过 **BrowserWindow实例** 的方法来监听其生命周期



#### 顺序

1. npm start启动项目后，运行目录中的main.js文件，启动主进程

2. main.js中，从electron中引入app和BrowserWindow

   ```js
   const { app, BrowserWindow, webContents } = require("electron");

使用app对象，调用api监听各个事件

当程序 '完成初始化'’ 事件，调用初始化方法

app.whenReady().then(()=>{createWindow()}) // 完成初始化时 *
app.on('ready',()=>{createWindow()})  // 完成初始化时

当 ’窗口被激活‘ 时，再次调用初始化方法

app.on("activate", ()=>{  // 窗口被激活时
    if(BrowserWindow.getAllWindows().length === 0){  // 容错处理-如果激活时还没有窗口
       createWindow()
       }
})

初始化时，创建一个 BrowserWindow (游览器窗口)实例，并通过实例读取src里的页面

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({  // BrowserWindow构造函数从electron依赖中引入
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),  // 进程信息
    },
  });
  // and load the index.html of the app.
  mainWindow.loadFile("./src/page/Home/index.html");  // 读取页面
}

当 ’窗口关闭‘ 时，调用销毁方法，比如：卸载监听、自动保存等

app.on("window-all-closed",()=>{}) // 所有窗口被关闭时 *
app.on("before-quit",()=>{}) // 在应用程序开始关闭窗口之前
app.on("will-quit",()=>{}) // 当所有窗口都已经关闭并且程序将退出时
app.on("quit",()=>{}) // 在应用程序退出时

事件集

app对象

生命周期相关

初始化

app.whenReady().then(()=>{createWindow()}) // 完成初始化时 *
app.on('ready',()=>{createWindow()})  // 完成初始化时

结束时

app.on("window-all-closed",()=>{}) // 所有窗口被关闭时 *
app.on("before-quit",()=>{}) // 在应用程序开始关闭窗口之前
app.on("will-quit",()=>{}) // 当所有窗口都已经关闭并且程序将退出时
app.on("quit",()=>{}) // 在应用程序退出时

webContents对象

webContents是实例化的 游览器窗口，每一个页面都是一个webContents实例对象

生命周期相关

初始化

.on("did-stop-loading",()=>{}) // 导航完成时
.on("did-finish-load",()=>{}) // 导航完成 且 页面onload(读取)完成时
.on("dom-ready",()=>{}) // 页面dom渲染完成时 *

API集

记录常用API

BrowserWindow游览器窗口 `构造函数`

BrowserWindow通过从electron中解构获得

作用：在main.js中，创建BrowserWindow实例来创建和控制窗口

配置项

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "./preload.js"),  // 预先需要加载的脚本路径
      nodeIntegration: true,  // 节点对象集合，需要打开
      contextIsolation: false,  // 上下文隔离，需要关闭
   	},
    ...options  // 其他选项
});

options

选项	类型	作用	默认
x	number	窗口于屏幕的横坐标(0为最左)	居中
y	number	窗口于屏幕的纵坐标(0为最上)	居中
width	number	宽度	800
height	number	高度	916
opacity	number	透明度[范围0 - 1]	1
backgroundColor	string	窗口背景色	#fff
transparent	boolean	是否是透明窗口
movable	boolean	是否可移动窗口	true
minimizable	boolean	是否可最小化	true
resizable	boolean	是否可改变尺寸	true
closable	boolean	是否可关闭	true
alwaysOnTop	boolean	是否置顶于桌面	false
frame	boolean	是否隐藏菜单栏(一般用于子窗口)	false
skipTaskbar	boolean	是否隐藏任务栏(一般要创建于托盘)	false
show	boolean	是否直接创建窗口	true
parent	窗口实例	关联父窗口，父窗口关闭则子窗口也关闭	null
modal	boolean	不关闭该子窗口，则无法获取父窗口焦点	false
webPreferences	配置对象	/

webPreferences

网页功能的设置

选项	类型	作用	默认
preload	path	预先需要加载的脚本路径	undefined
nodeIntegration	boolean	是否启用Node集成对象	false
contextIsolation	boolean	是否隔离上下文(独立运行)	true
webSecurity	boolean	是否禁用同源策略(别乱改!!)	true

实例方法

.loadFile("./index.html");  // 初始化加载页面的路径
.show()  // 打开窗口
.setBrowserView(BrowserView实例)  // 用于嵌入BrowserView页面

实例事件

.once('ready-to-show',()=>{win.show()})  // 当页面加载完成

preload进程 `对象`

功能：preload对象一般用于获取用户的运行环境，用以判断bug状态

注意：需在BrowserWindow创建时添加配置

// 创建时的配置
const mainWindow = new BrowserWindow({
	width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),  // 默认存在
      nodeIntegration: true,  // 节点对象集合，需要打开
      contextIsolation: false,  // 上下文隔离，需要关闭
   },
});

process.getCPUUsage()  // 获取cpu占用
process.getSystemMemoryInfo()  // 获取内存信息
process.env // 获取环境变量
process.pid // 获取进程id(唯一标识符)
process.arch // 32位系统 || 64位系统
process.platform  // windows || macOS
process.versions // 获取各环境版本集对象
process.version // 获取node版本

File文件 `对象`

Electron向 文件 接口添加了一个 path 属性, 在文件系统上暴露出文件的真实路径

功能：File对象用于获取文件的真实路径，通过nodeJS模块获取文件信息

注意：使用时需阻止 'dragover(拖拽元素进入区域后悬停触发)' 事件的默认行为，以防drop无法响应

并阻止 'drop(拖拽元素放置时触发)' 事件的默认行为，以防页面迁移(拖进来一个html文件)

  document.addEventListener('drop', (e) => {
    e.preventDefault();  // 阻止默认事件(阻止页面迁移)
    e.stopPropagation();  // 阻止冒泡(可以不要)
      
    for (const f of e.dataTransfer.files) {
      // e:事件对象，dataTransfer:数据传输对象*
      console.log('File(s) you dragged here: ', f.path)  
    }
  });
  document.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
  });

webview嵌入窗口 `标签`

功能：用于嵌入外部网页，是ifrom标签的强化版

注意：需在main.js创建BrowserWindow实例时添加配置

webview标签需要宽高，src的网址需要写完整

// 创建时的配置
const mainWindow = new BrowserWindow({
	width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),  // 默认存在
      webviewTag: true,  // 允许嵌入外部网页
   },
});

属性

用于改变嵌入页面的内容

<webview 
	style="width: 100%; height: 300px"
    src="http://www.bilibili.com"  // 被嵌入的网址
	preload='js脚本路径'  // js在页面开始加载时执行
	httpreferrer='https://www.acfun.cn/'  // 改变请求头的Referer部分
	useragent='http://cheng.guru'  // 改变请求头的User-Agent部分
	nodeintegration=true  // 允许嵌入页面调用node方法，不推荐使用
/>

实例方法

用于 获取或改变 嵌入页面的内容

.getURL()  // 获取页面地址
.getTitle()  // 获取页面title
.openDevTools()  // 打开页面控制台
.insertCSS(`
	#su{
		border:1px solid red
	}
`)  // 注入css样式，需用模板字符串
.executeJavaScript(`
	alert('hello')
`)  // 注入css样式，需用模板字符串

实例事件

用于监听嵌入网页的 生命周期 。

.addEventListener("did-start-loading",()=>{})  // 开始加载嵌入的页面
.addEventListener("did-stop-loading",()=>{})  // 完成加载嵌入的页面

BrowserView嵌入窗口 `构造函数`

BrowserView通过从electron中解构获得

作用：可用于替代webview标签

配置项

options

选项	类型	作用	默认
x	number	窗口于屏幕的横坐标(0为最左)	false
y	number	窗口于屏幕的纵坐标(0为最上)	false
width	number	宽度	false
height	number	高度	false

实例方法

.setBounds(options)  // 具体配置参考↑
.webContents.loadURL("http://www.baidu.com");  // 嵌入的页面地址

open创建窗口 `方法`

electron改写了 window.open() 方法

功能：创建一个具备更多功能的新窗口，并返回一个实例用于监听。

参数： url：目标网址 [frameName：打开方式(当前页面打开_self、创建页面打开_blank)] [features：可选项]

let 实例;
function handleClick (){
	实例 = window.open('https://www.bilibili.com','_blank','nodeIntegration=no')
}

实例方法

.close()  // 关闭子窗口
.blur()  // 子窗口移除焦点（没试出来）
.fouse()  // 子窗口获取焦点（没试出来）
.eval()  // 子窗口运行代码，参数为字符串
.print()  // 子窗口触发打印对话框
.postMessage()  // 向子窗口传递信息，方法参考↓

postMessage窗口信息传递 `方法`

功能：通过该方法，实现父子窗口之间的信息传递

信息发送方法

opener.postMessage("信息来啦")

窗口信息事件

// 接受信息
window.addEventListener("message", (msg) => {
  console.log(msg.data);
});

上手 ​

前置需求 ​

技能支持 ​

环境支持 ​

开发注意事项 ​

运行 electron（最新） ​

1. 利用npx创建项目 ​

运行 electron ​

1. 克隆或下载官方示例 ​

2. 安装依赖 ​

2.5 安装npm淘宝镜像 ​

3. 启动项目 ​

事件集 ​

app对象 ​

生命周期相关 ​

初始化 ​

结束时 ​

webContents对象 ​

生命周期相关 ​

初始化 ​

API集 ​

BrowserWindow游览器窗口 构造函数 ​

配置项 ​

options ​

webPreferences ​

实例方法 ​

实例事件 ​

preload进程 对象 ​

File文件 对象 ​

webview嵌入窗口 标签 ​

属性 ​

实例方法 ​

实例事件 ​

BrowserView嵌入窗口 构造函数 ​

配置项 ​

options ​

实例方法 ​

open创建窗口 方法 ​

实例方法 ​

postMessage窗口信息传递 方法 ​

信息发送方法 ​

窗口信息事件 ​

上手

前置需求

技能支持

环境支持

开发注意事项

运行 electron（最新）

1. 利用npx创建项目

运行 electron

1. 克隆或下载官方示例

2. 安装依赖

2.5 安装npm淘宝镜像

3. 启动项目

事件集

app对象

生命周期相关

初始化

结束时

webContents对象

生命周期相关

初始化

API集

BrowserWindow游览器窗口 `构造函数`

配置项

options

webPreferences

实例方法

实例事件

preload进程 `对象`

File文件 `对象`

webview嵌入窗口 `标签`

属性

实例方法

实例事件

BrowserView嵌入窗口 `构造函数`

配置项

options

实例方法

open创建窗口 `方法`

实例方法

postMessage窗口信息传递 `方法`

信息发送方法

窗口信息事件